<template>
    <div class="scrollerWrap" :style="{top:(isSearch == true ? '4rem' : '3rem')}">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller" noDataText>
            <div class="prdtItem-wrapper" :class="{'hot-item':hotItemSub === true}">
                <div class="item-wrapper">
                    <div v-for="(item, index) in productlist" :key="item.id" class="item-box">
                        <div class="img-wrap">
                            <router-link
                                :to="{ name: '/product/detail', query: {id: item.product_id} }"
                            >
                                <img class="ad-img" :src="constant.api_url + item.thumb">
                            </router-link>
                        </div>
                        <div class="bottom-info">
                            <div class="box-l item-title">
                                <router-link
                                    :to="{ name: '/product/detail', query: {id: item.product_id} }"
                                >
                                    <p>{{item.product_title}}</p>
                                </router-link>
                            </div>
                            <div class="box-r item-price" v-if="hotItemSub">
                                <p>
                                    <span class="icon iconfont icon-fl-renminbi"></span>
                                    <span class="num-txt">{{item.product_price}}</span>元
                                </p>
                            </div>
                        </div>
                        <div class="bottom-feature clearfix" v-if="is_user">
                            <div class="box-l">
                                <p>
                                    <span class="icon iconfont icon-yanjing"></span>
                                    <span class="view-txt">{{item.views}}人已看</span>
                                </p>
                            </div>
                            <div class="box-r">
                                <!-- <p class="like-txt">
                <a href="javascript:;" @click="zan(item, index)">
                  <span class="icon iconfont icon-dianzan"></span>
                  <span class="num-txt">{{item.zan_count}}</span>
                </a>
                                </p>-->
                                <p class="collect-txt">
                                    <a href="javascript:;" @click="collect(item, index)">
                                        <span class="icon iconfont icon-xingxing"></span>
                                        <span class="num-txt">{{item.collect_count}}</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="bottom-cart clearfix" v-if="!hotItemSub">
                            <div class="box-l item-price">
                                <p>
                                    <span class="icon iconfont icon-fl-renminbi"></span>
                                    <span class="num-txt">{{item.product_price}}</span>元
                                </p>
                            </div>
                            <div class="box-r item-cart">
                                <router-link
                                    :to="{ name: '/product/detail', query: {id: item.product_id} }"
                                >
                                    <span class="icon iconfont icon-gouwuche"></span>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="submit-box">
                    <button v-on:click="product_list" class="submit-btn">下拉加载更多</button>
            </div>-->
            <div class="linewrapper" v-if="is_bottom">
                <span class="line"></span>
                <span class="linecontent">我是有底线的</span>
                <span class="line"></span>
            </div>
        </scroller>
    </div>
</template>

<script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
export default {
  name: "productItem",

  data() {
    return {
      productlist: [],
      constant: constant,
      p: 0,
      keyword: "",
      category_id: "",
      is_collect: 0,
      is_user: false,
      is_bottom: false,
      is_loading: false
    };
  },

  mounted() {},

  props: {
    hotItemSub: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: Boolean,
      default: false
    }
  },

  components: {},
  methods: {
    zan(item, index) {
      let id = this.$route.query.id;
      http.get(this, {
        url: "product/zan",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("产品点赞:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(
              this.productlist[index],
              "zan_count",
              data.info.zan_count
            );
          }
        }
      });
    },
    collect(item, index) {
      http.get(this, {
        url: "product/collect",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("产品收藏:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(
              this.productlist[index],
              "collect_count",
              data.info.collect_count
            );
          }
        }
      });
    },
    product_list() {
      if (!this.is_loading) {
          this.is_loading = true;
        let keyword = this.$route.query.keyword;
        if (keyword) {
          this.keyword = keyword;
        } else {
          this.keyword = "";
        }

        let category_id = this.$route.query.category_id;
        if (category_id) {
          this.category_id = category_id;
        } else {
          this.category_id = "";
        }

        let is_collect = this.$route.query.is_collect;
        if (is_collect) {
          this.is_collect = is_collect;
        } else {
          this.is_collect = 0;
        }

        this.p++;
        http.get(this, {
          url: "product/product_list",
          data: {
            pagesize: 6,
            p: this.p,
            keyword: this.keyword,
            category_id: this.category_id,
            is_collect: this.is_collect,
            token: localStorage.getItem("user_token")
          },
          dataType: "json",
          success: function(data) {
            console.log("产品:", data);
            if (data.status == 1) {
              let info = data.info;
              if (this.$data.p <= info.total_page) {
                this.productlist = this.productlist.concat(info.list);
                this.is_bottom = false;
              } else {
                this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
                this.is_bottom = true;
              }
            }
            this.is_loading = false;
          },
          fail: function(){
              this.is_loading = false;
          }
        });
      }
    },
    // 下拉刷新
    refresh(done) {
      this.p = 0; //重置页数刷新每次页数都是第一页
      this.is_bottom = false; //重置数据判断
      setTimeout(
        function() {
          this.product_list();
          this.$refs.myscroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
          done();
        }.bind(this),
        1700
      );
    },
    // 上拉加载
    infinite(done) {
      if (this.is_bottom) {
        this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
      } else {
        setTimeout(() => {
          this.product_list();
          done(); //进行下一次加载操作
        }, 1500);
      }
    }
  },
  watch: {
    $route() {
      console.log("监听");
      this.productlist = [];
      this.p = 0;
      this.is_loading = false;
      this.product_list();
    }
  },
  created() {
    this.is_bottom = false;
    if (localStorage.getItem("user_type") == 0) {
      this.is_user = true;
    }
  },
  activated() {
    this.is_bottom = false;
    if (localStorage.getItem("user_type") == 0) {
      this.is_user = true;
    }
    this.productlist = [];
    this.p = 0;
    this.product_list();
  }
};
</script>

<style scoped lang="scss">
.scrollerWrap {
  position: absolute;
  //   width: 100%;
  //   height: 90%; //有header的时候可能会出现滚动条，所以最好高度是除去header的高度
  top: 3rem; //一般页面有header的时候需要留出header的高度
  bottom: 0.5rem;
  left: 0.2rem;
  right: 0.2rem;
  main {
    height: 100%;
  }
}

.linewrapper {
  margin: 0;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.3rem;
}
.line {
  display: inline-block;
  width: 2rem;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  vertical-align: middle;
}
.prdtItem-wrapper {
  color: $c-mainC;

  background-color: $c-white-light;

  padding: 0;

  margin-top: 0.15rem;

  width: 100%;

  text-align: center;

  .item-title {
    font-size: 0.32rem;

    width: 80%;

    margin: auto;

    text-align: center;
  }

  .item-wrapper {
    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    text-align: left;
  }

  .item-box {
    margin: 0rem 0 0.1rem;

    width: 3.46rem;

    .img-wrap {
      width: 100%;

      height: 2.37rem;

      overflow: hidden;

      position: relative;

      border-radius: 0.1rem;

      .ad-img {
        @extend .cmm-translateXY;
        width: 100%;
        height: 100%;
      }
    }

    $letHeight: 0.52rem;

    .bottom-info {
      @extend .cmm-clearfix;
      line-height: 0.52rem;

      margin-top: 0.14rem;

      .box-l {
        width: 100%;

        float: none;
      }

      .box-r {
        width: 50%;

        float: right;
      }

      .item-title {
        p {
          width: 100%;

          font-size: 0.26rem;

          line-height: 0.52rem;

          text-align: left;
        }
      }
    }

    .item-price {
      p {
        font-size: 0.32rem;

        color: $c-themeC;

        text-align: right;

        line-height: $letHeight;

        letter-spacing: -0.01rem;
      }

      span {
        display: inline-block;

        line-height: 0.52rem;

        float: left;
      }

      .icon {
        font-size: 0.4rem;

        margin-right: 0rem;
      }
    }

    .bottom-feature {
      padding: 0 0.1rem;
      height: $letHeight;
      line-height: $letHeight;
      .box-l {
        width: 50%;

        float: left;

        p {
          color: $c-mainC;

          font-size: 0.22rem;

          white-space: nowrap;

          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;

            display: inline-block;
          }

          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          font-size: 0.28rem;

          color: $c-themeC;

          font-weight: bold;
        }
      }

      .box-r {
        width: 50%;

        text-align: right;

        float: right;

        p {
          display: inline-block;

          line-height: $letHeight;

          white-space: nowrap;

          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;

            display: inline-block;

            letter-spacing: -0.02rem;
          }
        }

        .like-txt {
          width: 50%;

          float: left;
        }

        .collect-txt {
          width: 50%;

          float: left;
        }

        p {
          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          line-height: 0.52rem;

          display: inline-block;

          font-size: 0.4rem;

          font-size: 0.28rem;

          color: $c-themeC;

          font-weight: bold;
        }

        .num-txt {
          color: $c-mainC;

          font-size: 0.22rem;

          line-height: 0.52rem;
        }
      }
    }

    .bottom-cart {
      padding: 0 0.1rem;
      .box-l {
        width: 70%;

        float: left;
      }

      .box-r {
        width: 30%;

        float: right;
      }

      .item-price {
        text-align: left;

        vertical-align: top;

        * {
          vertical-align: top;
        }
      }

      .item-cart {
        text-align: right;
        display: none;
        vertical-align: top;

        * {
          vertical-align: top;
        }

        .icon {
          font-size: 0.4rem;

          color: $c-themeC;
        }
      }
    }
  }

  .submit-btn {
    width: 6.26rem;

    border-radius: 0.8rem;

    background-color: $c-themeBg;

    font-size: 0.36rem;

    font-weight: normal;

    color: $c-white-light;

    $letHeight: 0.8rem;

    height: $letHeight;

    line-height: $letHeight;

    text-align: center;

    margin: 0.78rem auto;

    display: inline-block;
  }
}

.prdtItem-wrapper.hot-item {
  padding: 0.24rem 0.2rem;

  .item-title {
  }

  .item-box {
    margin: 0rem auto 0.1rem;

    width: 100%;

    .img-wrap {
      height: 3rem;

      .ad-img {
      }
    }

    $letHeight: 0.52rem;

    .bottom-info {
      margin-top: 0.18rem;

      background-color: $c-gray-dark;

      .box-l {
        width: 50%;

        float: left;
      }

      .box-r {
      }

      .item-title {
        p {
          @extend .cmm-txtOverflow;

          line-height: $letHeight;
        }
      }
    }

    .item-price {
      p {
      }

      span {
        float: none;
      }

      .icon {
        font-size: 0.36rem;

        margin-right: -0.1rem;
      }
    }

    .bottom-feature {
      .box-l {
        p {
          letter-spacing: 0;

          * {
          }

          span {
            letter-spacing: 0;
          }
        }

        .icon {
          font-size: 0.36rem;
        }
      }

      .box-r {
        p {
          letter-spacing: 0px;

          * {
            letter-spacing: 0px;
          }
        }

        .like-txt {
          width: 30%;

          float: none;
        }

        .collect-txt {
          width: 30%;

          float: none;
        }

        p {
          span {
          }
        }

        .icon {
        }

        .num-txt {
        }
      }
    }
  }
}
</style>
